﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>Tooltip 提示指令 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link active" href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#tooltips" class="nav-link font-weight-bold"><span>Tooltips</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>Overview</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#positioning" class="nav-link"><span>Positioning</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#triggers" class="nav-link"><span>Triggers</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#making-tooltips-work-for-keyboard-and-assistive-technology-users" class="nav-link"><span>Making tooltips work for keyboard and assistive technology users</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disabled-elements" class="nav-link"><span>Disabled elements</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#caveats-with-focus-trigger-on-button-elements" class="nav-link"><span>Caveats with focus trigger on &lt;button&gt; elements</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dismiss-on-next-click" class="nav-link"><span>Dismiss on next click</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#title-content" class="nav-link"><span>Title content</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#variants-and-custom-class" class="nav-link"><span>Variants and custom class</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-syntax-and-usage" class="nav-link"><span>Directive syntax and usage</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#usage" class="nav-link"><span>Usage</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#hiding-and-showing-tooltips-via-root-events" class="nav-link"><span>Hiding and showing tooltips via $root events</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabling-and-enabling-tooltips-via-root-events" class="nav-link"><span>Disabling and enabling tooltips via $root events</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>See also</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-reference" class="nav-link"><span>Directive reference</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-directives" class="nav-link"><span>Importing individual directives</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>

</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/directives/" class="nuxt-link-active" target="_self">指令</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">Tooltip 提示指令</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">Tooltip 提示指令</h1>
  <p class="bd-lead">使用Bootstrap v4 的CSS样式和动画添加自定义BootstrapVue工具提示的文档和示例，比如通过将鼠标悬停、聚焦或单击元素来触发工具Tooltip提示。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>



<nav class="bd-quick-links mb-3 d-xl-none" style="" data-v-4abf2740="">
<header data-v-4abf2740="">
<button data-v-4abf2740="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"> Show page table of contents </button>
</header>
<ul data-v-4abf2740="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#overview" class=""><span data-v-4abf2740="">Overview</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#positioning" class=""><span data-v-4abf2740="">Positioning</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#triggers" class=""><span data-v-4abf2740="">Triggers</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#making-tooltips-work-for-keyboard-and-assistive-technology-users" class=""><span data-v-4abf2740="">Making tooltips work for keyboard and assistive technology users</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#disabled-elements" class=""><span data-v-4abf2740="">Disabled elements</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#caveats-with-focus-trigger-on-button-elements" class=""><span data-v-4abf2740="">Caveats with focus trigger on &lt;button&gt; elements</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#dismiss-on-next-click" class=""><span data-v-4abf2740="">Dismiss on next click</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#title-content" class=""><span data-v-4abf2740="">Title content</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#variants-and-custom-class" class=""><span data-v-4abf2740="">Variants and custom class</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-syntax-and-usage" class=""><span data-v-4abf2740="">Directive syntax and usage</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#usage" class=""><span data-v-4abf2740="">Usage</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#hiding-and-showing-tooltips-via-root-events" class=""><span data-v-4abf2740="">Hiding and showing tooltips via $root events</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#disabling-and-enabling-tooltips-via-root-events" class=""><span data-v-4abf2740="">Disabling and enabling tooltips via $root events</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#see-also" class=""><span data-v-4abf2740="">See also</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-reference" class=""><span data-v-4abf2740="">Directive reference</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-individual-directives" class=""><span data-v-4abf2740="">Importing individual directives</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-4abf2740="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p><code class="text-nowrap" translate="no">v-b-tooltip</code> 指令可以在任何元素与组件上调用tooltip提示指示。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip">
<div class="text-center my-3">
<button title="Tooltip content" type="button" class="btn btn-secondary">Hover Me</button>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center my-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip content"</span>&gt;</span>Hover Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">概述<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>使用工具提示指令需要知道的事项：</p>
<ul>
<li>工具提示依赖于第三方库 <a href="https://popper.js.org/" target="_blank" rel="noopener">Popper.js</a> for positioning.</li>
<li>工具提示需要BootstrapVue的自定义SCSS / CSS才能正常运行，并提供变体。</li>
<li>如果未提供标题（或为空字符串），则不会显示工具提示。</li>
<li>指定容器：“ body”（默认），以避免在更复杂的组件（如输入组，按钮组等）中出现渲染问题。</li>
<li>在隐藏元素上触发工具提示将不起作用。 </li>
<li><code class="text-nowrap" translate="no">禁用</code> 元素的工具提示必须在包装器元素上触发。</li>
<li> 从跨越多行的超链接触发时，工具提示将居中。使用空格，在您的<code class="text-nowrap" translate="no">&lt;a&gt;</code>， <code class="text-nowrap" translate="no">&lt;b-link&gt;</code> 和<code class="text-nowrap" translate="no">&lt;router-link&gt;</code>上，以避免此行为。.</li>
<li>在从DOM中删除其相应元素之前，必须先隐藏工具提示。</li>
</ul>
<h2 id="positioning" class="bv-no-focus-ring"><span class="bd-content-title">定位<a class="anchorjs-link" href="#positioning" aria-labelledby="positioning"></a></span></h2>
<p>十二个选项可用于定位： <code class="text-nowrap" translate="no">上</code>, <code class="text-nowrap" translate="no">左上</code>, <code class="text-nowrap" translate="no">右上</code>, <code class="text-nowrap" translate="no">右</code>, <code class="text-nowrap" translate="no">右上</code>, <code class="text-nowrap" translate="no">右下</code>, <code class="text-nowrap" translate="no">下</code>, <code class="text-nowrap" translate="no">左下</code>, <code class="text-nowrap" translate="no">右下</code>, <code class="text-nowrap" translate="no">左</code>, <code class="text-nowrap" translate="no">左上</code>, 和 <code class="text-nowrap" translate="no">左下</code> aligned.
默认位置是 <code class="text-nowrap" translate="no">上</code>。位置相对于触发元素</p>
<div class="bd-example bd-example-tooltip-static">
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" style="left: calc(50% - 6px)"></div>
<div class="tooltip-inner">Tooltip on the top</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" style="right: 0px"></div>
<div class="tooltip-inner">Tooltip on the topleft</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" style="left: 0px"></div>
<div class="tooltip-inner">Tooltip on the topright</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" style="top: 5px"></div>
<div class="tooltip-inner">Tooltip on the right</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" style="bottom: 0px"></div>
<div class="tooltip-inner">Tooltip on the righttop</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" style="top: 0px"></div>
<div class="tooltip-inner">Tooltip on the rightbottom</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" style="left: calc(50% - 6px)"></div>
<div class="tooltip-inner">Tooltip on the bottom</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" style="right: 0px"></div>
<div class="tooltip-inner">Tooltip on the bottomleft</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" style="left: 0px"></div>
<div class="tooltip-inner">Tooltip on the bottomright</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" style="top: 5px"></div>
<div class="tooltip-inner">Tooltip on the left</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" style="bottom: 0px"></div>
<div class="tooltip-inner">Tooltip on the lefttop</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" style="top: 0px"></div>
<div class="tooltip-inner">Tooltip on the leftbottom</div>
</div>
</div>
<p><strong>现场列子Triggers</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-positioning">
<div>
<div class="container-fluid">
<div class="row text-center">
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left bottom</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right bottom</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.top</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.right</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.left</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.bottom</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.topright</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.topleft</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.bottomright</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.bottomleft</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.lefttop</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.leftbottom</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.righttop</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.rightbottom</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="triggers" class="bv-no-focus-ring"><span class="bd-content-title">扳机<a class="anchorjs-link" href="#triggers" aria-labelledby="triggers"></a></span></h2>
<p>可以通过 <code class="text-nowrap" translate="no">单击</code>, <code class="text-nowrap" translate="no">悬停</code>和 <code class="text-nowrap" translate="no">焦点的任意组合来触发（打开/关闭）工具提示</code>. 默认触发器是 <code class="text-nowrap" translate="no">焦点悬停</code>。或者可以指定一个手动触发器，其中只能<a href="#hiding-and-showing-tooltips-via-root-events" class="font-weight-bold">以编程方式</a>打开或关闭弹窗。</p>
<p>If a tooltip has more than one trigger, then all triggers must be cleared before the tooltip will
close. I.e. if a tooltip has the trigger <code class="text-nowrap" translate="no">focus click</code>, and it was opened by <code class="text-nowrap" translate="no">focus</code>, and the user
then clicks the trigger element, they must click it again <strong>and</strong> move focus to close the tooltip.</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-triggers">
<div>
<div class="container">
<div class="row text-center">
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Hover + Focus</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Hover</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Click</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Focus</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Hover + Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.click</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Click<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.focus</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h3 id="making-tooltips-work-for-keyboard-and-assistive-technology-users" class="bv-no-focus-ring"><span class="bd-content-title">Making tooltips work for keyboard and assistive technology users<a class="anchorjs-link" href="#making-tooltips-work-for-keyboard-and-assistive-technology-users" aria-labelledby="making-tooltips-work-for-keyboard-and-assistive-technology-users"></a></span></h3>
<p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and
interactive (such as links, buttons, or form controls). Although arbitrary HTML elements (such as <code class="text-nowrap" translate="no">&lt;span&gt;</code>s) can be made focusable by adding the <code class="text-nowrap" translate="no">tabindex="0"</code> attribute, this will add potentially
annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most
assistive technologies currently do not announce the tooltip in this situation.</p>
<p>Additionally, do not rely solely on <code class="text-nowrap" translate="no">hover</code> as the trigger for your tooltip, as this will make your
tooltips <em>impossible to trigger for keyboard-only users</em>.</p>
<h3 id="disabled-elements" class="bv-no-focus-ring"><span class="bd-content-title">Disabled elements<a class="anchorjs-link" href="#disabled-elements" aria-labelledby="disabled-elements"></a></span></h3>
<p>Elements with the <code class="text-nowrap" translate="no">disabled</code> attribute aren’t interactive, meaning users cannot focus, hover, or
click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip
from a wrapper <code class="text-nowrap" translate="no">&lt;div&gt;</code> or <code class="text-nowrap" translate="no">&lt;span&gt;</code>, ideally made keyboard-focusable using <code class="text-nowrap" translate="no">tabindex="0"</code>, and
override the <code class="text-nowrap" translate="no">pointer-events</code> on the disabled element.</p>
<div translate="translate" class="bd-example vue-example vue-example-disabled-trigger-element">
<div><span tabindex="0" title="Disabled tooltip" class="d-inline-block">
<button type="button" disabled="disabled" class="btn btn-primary disabled" style="pointer-events: none;">Disabled button</button>
</span></div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">v-b-tooltip.top</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled tooltip"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"pointer-events: none;"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h3 id="caveats-with-focus-trigger-on-button-elements" class="bv-no-focus-ring"><span class="bd-content-title">Caveats with <code class="text-nowrap" translate="no">focus</code> trigger on <code class="text-nowrap" translate="no">&lt;button&gt;</code> elements<a class="anchorjs-link" href="#caveats-with-focus-trigger-on-button-elements" aria-labelledby="caveats-with-focus-trigger-on-button-elements"></a></span></h3>
<p>For proper cross-browser and cross-platform behavior when using only the <code class="text-nowrap" translate="no">focus</code> trigger, you must
use an element that renders the <code class="text-nowrap" translate="no">&lt;a&gt;</code> tag, not the <code class="text-nowrap" translate="no">&lt;button&gt;</code> tag, and you also must include a <code class="text-nowrap" translate="no">tabindex="0"</code> attribute.</p>
<p>The following will generate an <code class="text-nowrap" translate="no">&lt;a&gt;</code> that looks like a button:</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
  <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>
  <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>
  <span class="hljs-attr">v-b-tooltip.focus</span>
  <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip title"</span>
&gt;</span>
  Link button with tooltip directive
<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<h3 id="dismiss-on-next-click" class="bv-no-focus-ring"><span class="bd-content-title">Dismiss on next click<a class="anchorjs-link" href="#dismiss-on-next-click" aria-labelledby="dismiss-on-next-click"></a></span></h3>
<p>Use both <code class="text-nowrap" translate="no">click</code> and <code class="text-nowrap" translate="no">blur</code> if you would like a tooltip that opens only on click of the element, but
will close when anything else in the document is clicked or receives focus.</p>
<p>Note that your element <strong>must</strong> be in the document tab sequence for this to work. If your element is
not tabbable, add the <code class="text-nowrap" translate="no">tabindex="0"</code> attribute to the element.</p>
<h2 id="title-content" class="bv-no-focus-ring"><span class="bd-content-title">Title content<a class="anchorjs-link" href="#title-content" aria-labelledby="title-content"></a></span></h2>
<p>There are several options for providing the title of a tooltip.</p>
<p>By default, tooltip will use the <code class="text-nowrap" translate="no">title</code> attribute of the element as the tooltip content. The title
can also be passed as an object to <code class="text-nowrap" translate="no">v-b-tooltip</code> in the form of</p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">title</span>: <span class="hljs-string">'This is the title'</span>
}</pre>
</div>
<p>If your title content has basic HTML markup, then you will also need to set the <code class="text-nowrap" translate="no">html</code> property to
true, or use the directive modifier <code class="text-nowrap" translate="no">html</code></p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-comment">// Object format with HTML</span>
<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">title</span>: <span class="hljs-string">'This is the &lt;strong&gt;title&lt;/strong&gt;'</span>,
  <span class="hljs-attr">html</span>: <span class="hljs-literal">true</span>
}</pre>
</div>
<p>Title can also be a function reference, which is called each time the tooltip is opened. To make the
title returned by a function reactive while open, set the title to a <em>new</em> function reference
whenever the content changes.</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-content">
<div class="container">
<div class="row text-center">
<div class="py-3 col-md-3">
<button title="Tip from title attribute Sun Mar 08 2020 15:13:36 GMT+0800 (中国标准时间)" type="button" class="btn btn-success">Title</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">String</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">Data</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">Method</button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"'Tip from title attribute ' + date"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"'String Tip'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>String<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.html</span>=<span class="hljs-string">"tipData"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Data<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.html</span>=<span class="hljs-string">"tipMethod"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Method<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tipData</span>: { <span class="hljs-attr">title</span>: <span class="hljs-string">'Tooltip &lt;em&gt;Message&lt;/em&gt;'</span> },
        <span class="hljs-attr">date</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(),
        <span class="hljs-attr">timer</span>: <span class="hljs-literal">null</span>
      }
    },
    mounted() {
      <span class="hljs-keyword">this</span>.timer = setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.date = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
      }, <span class="hljs-number">1000</span>)
    },
    beforeDestroy() {
      clearInterval(<span class="hljs-keyword">this</span>.timer)
    },
    <span class="hljs-attr">methods</span>: {
      tipMethod() {
        <span class="hljs-comment">// Note this is called each time the tooltip is first opened.</span>
        <span class="hljs-keyword">return</span> <span class="hljs-string">'&lt;strong&gt;'</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>() + <span class="hljs-string">'&lt;/strong&gt;'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
</div>
<h2 id="variants-and-custom-class" class="bv-no-focus-ring"><span class="bd-content-title">Variants and custom class<a class="anchorjs-link" href="#variants-and-custom-class" aria-labelledby="variants-and-custom-class"></a></span></h2>
<p>BootstrapVue's tooltips support contextual color variants via our custom CSS, either by using
directive modifiers or config options:</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-variants">
<div class="container-fluid">
<div class="row text-center">
<div class="col">
<button title="Danger variant" type="button" class="btn btn-secondary">Danger Modifier</button>
</div>
<div class="col">
<button title="Info variant" type="button" class="btn btn-secondary">Info Config</button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.v-danger</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Danger variant"</span>&gt;</span>Danger Modifier<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"{ variant: 'info' }"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Info variant"</span>&gt;</span>Info Config<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre>
</div>
<p>Bootstrap default theme variants are: <code class="text-nowrap" translate="no">danger</code>, <code class="text-nowrap" translate="no">warning</code>, <code class="text-nowrap" translate="no">success</code>, <code class="text-nowrap" translate="no">primary</code>, <code class="text-nowrap" translate="no">secondary</code>, <code class="text-nowrap" translate="no">info</code>, <code class="text-nowrap" translate="no">light</code>, and <code class="text-nowrap" translate="no">dark</code>. You can change or add additional variants via Bootstrap <a href="/docs/reference/theming" class="font-weight-bold">SCSS variables</a></p>
<p>A custom class can be applied to the tooltip outer wrapper <code class="text-nowrap" translate="no">&lt;div&gt;</code> by using the <code class="text-nowrap" translate="no">customClass</code> option
property:</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"{ customClass: 'my-tooltip-class' }"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<h2 id="directive-syntax-and-usage" class="bv-no-focus-ring"><span class="bd-content-title">Directive syntax and usage<a class="anchorjs-link" href="#directive-syntax-and-usage" aria-labelledby="directive-syntax-and-usage"></a></span></h2>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip:</span>[<span class="hljs-attr">container</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod1</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod2</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">...</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">modN</span>]=<span class="hljs-string">"&lt;value&gt;"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<p>Where <code class="text-nowrap" translate="no">[container]</code> can be (optional):</p>
<ul>
<li>An element ID (minus the #) to place the tooltip markup in</li>
<li>If not provided, tooltips are appended to the <code class="text-nowrap" translate="no">body</code>. If the trigger element is inside a modal,
the tooltip will be appended to the modal's container</li>
</ul>
<p>Where <code class="text-nowrap" translate="no">[modX]</code> can be (all optional):</p>
<ul>
<li>Positioning: <code class="text-nowrap" translate="no">top</code>, <code class="text-nowrap" translate="no">bottom</code>, <code class="text-nowrap" translate="no">left</code>, <code class="text-nowrap" translate="no">right</code>, <code class="text-nowrap" translate="no">auto</code>, <code class="text-nowrap" translate="no">topleft</code>, <code class="text-nowrap" translate="no">topright</code>, <code class="text-nowrap" translate="no">bottomleft</code>, <code class="text-nowrap" translate="no">bottomright</code>, <code class="text-nowrap" translate="no">lefttop</code>, <code class="text-nowrap" translate="no">leftbottom</code>, <code class="text-nowrap" translate="no">righttop</code>, or <code class="text-nowrap" translate="no">rightbottom</code> (last one found wins,
defaults to <code class="text-nowrap" translate="no">top</code>).</li>
<li>Event trigger: <code class="text-nowrap" translate="no">click</code>, <code class="text-nowrap" translate="no">hover</code>, <code class="text-nowrap" translate="no">focus</code>, <code class="text-nowrap" translate="no">blur</code> (if none specified, defaults to <code class="text-nowrap" translate="no">focus</code> and <code class="text-nowrap" translate="no">hover</code>. <code class="text-nowrap" translate="no">blur</code> is a close handler only, and if specified by itself, will be converted to <code class="text-nowrap" translate="no">focus</code>). Use <code class="text-nowrap" translate="no">manual</code> if you only want to control the visibility manually.</li>
<li><code class="text-nowrap" translate="no">nofade</code> to turn off animation.</li>
<li><code class="text-nowrap" translate="no">html</code> to enable rendering raw HTML. By default HTML is escaped and converted to text.</li>
<li>A delay value in the format of <code class="text-nowrap" translate="no">d###</code> (where <code class="text-nowrap" translate="no">###</code> is in ms, defaults to <code class="text-nowrap" translate="no">50</code>), applied to both <code class="text-nowrap" translate="no">hide</code> and <code class="text-nowrap" translate="no">show</code>.</li>
<li>A show delay value in the format of <code class="text-nowrap" translate="no">ds###</code> (where <code class="text-nowrap" translate="no">###</code> is in ms, defaults to <code class="text-nowrap" translate="no">50</code>), applied to <code class="text-nowrap" translate="no">show</code> trigger only.</li>
<li>A hide delay value in the format of <code class="text-nowrap" translate="no">dh###</code> (where <code class="text-nowrap" translate="no">###</code> is in ms, defaults to <code class="text-nowrap" translate="no">50</code>), applied to <code class="text-nowrap" translate="no">hide</code> trigger only.</li>
<li>An offset value in pixels in the format of <code class="text-nowrap" translate="no">o###</code> (where <code class="text-nowrap" translate="no">###</code> is the number of pixels, defaults
to <code class="text-nowrap" translate="no">0</code>. Negative values allowed).</li>
<li>A boundary setting of <code class="text-nowrap" translate="no">window</code> or <code class="text-nowrap" translate="no">viewport</code>. The element to constrain the visual placement of the
tooltip. If not specified, the boundary defaults to the trigger element's scroll parent (in most
cases this will suffice).</li>
<li>A contextual variant in the form of <code class="text-nowrap" translate="no">v-XXX</code> (where <code class="text-nowrap" translate="no">XXX</code> is the color variant name).</li>
<li><code class="text-nowrap" translate="no">noninteractive</code> to make the tooltip not user-interactive.</li>
</ul>
<p>Where <code class="text-nowrap" translate="no">&lt;value&gt;</code> can be (optional):</p>
<ul>
<li>A string containing the title of the tooltip</li>
<li>A function reference to generate the title of the tooltip (receives one arg which is a reference
to the DOM element triggering the tooltip)</li>
<li>An object containing more complex configuration of tooltip. See below for accepted object
properties:</li>
</ul>
<p><strong>Options configuration object properties:</strong></p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="text-nowrap" translate="no">animation</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">true</code></td>
<td>Apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">container</code></td>
<td>String ID or HTMLElement or <code class="text-nowrap" translate="no">false</code></td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>Appends the tooltip to a specific element. Example: <code class="text-nowrap" translate="no">container: '#body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. When set to <code class="text-nowrap" translate="no">false</code> the tooltip will be appended to <code class="text-nowrap" translate="no">body</code>, or if the trigger element is inside a modal it will append to the modal's container</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">delay</code></td>
<td>Number or Object</td>
<td><code class="text-nowrap" translate="no">50</code></td>
<td>Delay showing and hiding the tooltip (ms). If a number is supplied, delay is applied to both hide/show. Object structure is: <code class="text-nowrap" translate="no">delay: { "show": 500, "hide": 100 }</code></td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">html</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>Allow HTML in the tooltip. If true, HTML tags in the tooltip's title will be rendered in the tooltip. If false, the title will be inserted as plain text. Use text if you're worried about XSS attacks</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">placement</code></td>
<td>String or Function</td>
<td><code class="text-nowrap" translate="no">'top'</code></td>
<td>How to position the tooltip - <code class="text-nowrap" translate="no">auto</code>, <code class="text-nowrap" translate="no">top</code>, <code class="text-nowrap" translate="no">bottom</code>, <code class="text-nowrap" translate="no">left</code>, <code class="text-nowrap" translate="no">right</code>, <code class="text-nowrap" translate="no">topleft</code>, <code class="text-nowrap" translate="no">topright</code>, <code class="text-nowrap" translate="no">bottomleft</code>, <code class="text-nowrap" translate="no">bottomright</code>, <code class="text-nowrap" translate="no">lefttop</code>, <code class="text-nowrap" translate="no">leftbottom</code>, <code class="text-nowrap" translate="no">righttop</code>, or <code class="text-nowrap" translate="no">rightbottom</code>. When <code class="text-nowrap" translate="no">auto</code> is specified, it will dynamically reorient the tooltip</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">title</code></td>
<td>String or Element or Function</td>
<td><code class="text-nowrap" translate="no">''</code></td>
<td>Default title value if title attribute isn't present. If a function is given, it must return a string</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">trigger</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">'hover focus'</code></td>
<td>How tooltip is triggered: <code class="text-nowrap" translate="no">click</code>, <code class="text-nowrap" translate="no">hover</code>, <code class="text-nowrap" translate="no">focus</code>. You may pass multiple triggers; separate them with a space</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">offset</code></td>
<td>Number or String</td>
<td><code class="text-nowrap" translate="no">0</code></td>
<td>Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">fallbackPlacement</code></td>
<td>String or Array</td>
<td><code class="text-nowrap" translate="no">'flip'</code></td>
<td>Allow to specify which position Popper will use on fallback. Can be <code class="text-nowrap" translate="no">flip</code>, <code class="text-nowrap" translate="no">clockwise</code>, <code class="text-nowrap" translate="no">counterclockwise</code> or an array of placements. For more information refer to Popper.js's behavior docs</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">boundary</code></td>
<td>String ID or HTMLElement</td>
<td><code class="text-nowrap" translate="no">'scrollParent'</code></td>
<td>The container that the tooltip will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll. Supported values: <code class="text-nowrap" translate="no">'scrollParent'</code> (default), <code class="text-nowrap" translate="no">'viewport'</code>, <code class="text-nowrap" translate="no">'window'</code>, or a reference to an HTML element</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">boundaryPadding</code></td>
<td>Number</td>
<td><code class="text-nowrap" translate="no">5</code></td>
<td>Amount of pixel used to define a minimum distance between the boundaries and the tooltip. This makes sure the tooltip always has a little padding between the edges of its container</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">interactive</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">true</code></td>
<td>Wether the tooltip should be user-interactive</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">variant</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>Contextual color variant for the tooltip</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">customClass</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>A custom classname to apply to the tooltip outer wrapper element</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">id</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>An ID to use on the tooltip root element. If none is provided, one will automatically be generated. If you do provide an ID, it <em>must</em> be guaranteed to be unique on the rendered page</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">disabled</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>Set to <code class="text-nowrap" translate="no">true</code> to disable the tooltip</td>
</tr>
</tbody>
</table>
</div>
<h3 id="usage" class="bv-no-focus-ring"><span class="bd-content-title">Usage<a class="anchorjs-link" href="#usage" aria-labelledby="usage"></a></span></h3>
<p><strong>Simplest usage:</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip="'This is a Tooltip!'"</pre>
</div>
<p>or use the element's <code class="text-nowrap" translate="no">title</code> attribute for the tooltip content:</p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip title="This is a title Tooltip"</pre>
</div>
<p><strong>Placement examples:</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.bottom
v-b-tooltip.right</pre>
</div>
<p><strong>Variant examples:</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.v-primary =&gt; `primary` variant
v-b-tooltip.v-danger =&gt; `danger` variant</pre>
</div>
<p><strong>Trigger examples:</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.hover =&gt; Hover only
v-b-tooltip.click =&gt; Click only
v-b-tooltip.hover.focus =&gt; Both hover and focus</pre>
</div>
<p><strong>Combo:</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.hover.bottom =&gt; Show on hover and place at bottom
v-b-tooltip.bottom.hover =&gt; Same as above
v-b-tooltip.bottom.hover.v-danger =&gt; Same as above, but with variant</pre>
</div>
<p><strong>Object:</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }"</pre>
</div>
<h2 id="hiding-and-showing-tooltips-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">Hiding and showing tooltips via $root events<a class="anchorjs-link" href="#hiding-and-showing-tooltips-via-root-events" aria-labelledby="hiding-and-showing-tooltips-via-root-events"></a></span></h2>
<p>You can close (hide) <strong>all open tooltips</strong> by emitting the <code class="text-nowrap" translate="no">bv::hide::tooltip</code> event on $root:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::tooltip'</span>)</pre>
</div>
<p>To close a <strong>specific tooltip</strong>, pass the trigger element's <code class="text-nowrap" translate="no">id</code>, or the <code class="text-nowrap" translate="no">id</code> of the tooltip (if one
was provided in the config object) as the first argument:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>To open a <strong>specific tooltip</strong>, pass the trigger element's <code class="text-nowrap" translate="no">id</code>, or the <code class="text-nowrap" translate="no">id</code> of the tooltip (if one
was provided in the config object) as the first argument when emitting the <code class="text-nowrap" translate="no">bv::show::tooltip</code> $root event:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>To open all popovers simultaneously, omit the <code class="text-nowrap" translate="no">id</code> argument when emitting the <code class="text-nowrap" translate="no">bv::show::tooltip</code> event.</p>
<p>These events work for both the component <strong>and</strong> directive versions of tooltip.</p>
<p>Note the <strong>trigger element</strong> must exist in the DOM and be in a visible state in order for the
tooltip to show.</p>
<h2 id="disabling-and-enabling-tooltips-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">Disabling and enabling tooltips via $root events<a class="anchorjs-link" href="#disabling-and-enabling-tooltips-via-root-events" aria-labelledby="disabling-and-enabling-tooltips-via-root-events"></a></span></h2>
<p>You can disable <strong>all open tooltips</strong> by emitting the <code class="text-nowrap" translate="no">bv::disable::tooltip</code> event on $root:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::tooltip'</span>)</pre>
</div>
<p>To disable a <strong>specific tooltip</strong>, pass the trigger element's <code class="text-nowrap" translate="no">id</code>, or the <code class="text-nowrap" translate="no">id</code> of the tooltip (if
one was provided in the config object) as the first argument:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>To enable a <strong>specific tooltip</strong>, pass the trigger element's <code class="text-nowrap" translate="no">id</code>, or the <code class="text-nowrap" translate="no">id</code> of the tooltip (if
one was provided in the config object) as the first argument when emitting the <code class="text-nowrap" translate="no">bv::enable::tooltip</code> $root event:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::enable::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>To enable all popovers simultaneously, omit the <code class="text-nowrap" translate="no">id</code> argument when emitting the <code class="text-nowrap" translate="no">bv::enable::tooltip</code> event.</p>
<p>These events work for both the component <strong>and</strong> directive versions of tooltip.</p>
<p>Note the <strong>trigger element</strong> must exist in the DOM in order for the tooltip to be enabled or
disabled.</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">See also<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="/docs/directives/popover" class="font-weight-bold"><code class="text-nowrap" translate="no">v-b-popover</code> directive</a></li>
<li><a href="/docs/components/tooltip" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-tooltip&gt;</code> component</a></li>
<li><a href="/docs/components/popover" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-popover&gt;</code> component</a></li>
</ul>
<!-- Directive reference section auto generated from directive package.json --> 
</section>
<section class="bd-content bd-component-reference">
<h2 id="directive-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">Directive reference<a href="/docs/directives/tooltip#directive-reference" class="anchorjs-link" aria-labelledby="directive-reference" target="_self"></a></span></h2>
<h3 id="importing-individual-directives" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> Importing individual directives <a href="/docs/directives/tooltip#importing-individual-directives" class="anchorjs-link" aria-labelledby="importing-individual-directives" target="_self"></a></span></h3>
<p> You can import individual directives into your project via the following named
        exports: </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__724">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Directive</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Named Export</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Import Path</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">v-b-tooltip</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBTooltip</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>Example:</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBTooltip } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
<span class="hljs-comment">// Note: Vue automatically prefixes the directive name with 'v-'</span>
Vue.directive(<span class="hljs-string">'b-tooltip'</span>, VBTooltip)</pre>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> Importing as a Vue.js plugin <a href="/docs/directives/tooltip#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> This plugin includes all of the above listed individual directives. </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__734">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Named Export</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Import Path</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBTooltipPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>Example:</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBTooltipPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(VBTooltipPlugin)</pre>


</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
